<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
    <meta name="keywords" content="xx,xx,xx" />
    <meta name="description" content="yyyyyyy" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta property="qc:admins" content="70003766576320416375" />
    <meta name="format-detection" content="telephone=no">
    <title>森淼商城</title>
    <link rel="stylesheet" href="../css/base/jquery-ui-1.10.3.css" type="text/css">
    <link rel="stylesheet" href="../plugin/bootstrap-3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/job.css">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->


    <style>
        html,body,.container-fluid{
            height: 100%;
        }
      .buy-content-top{
          height: 300px;
          width: 100%;
          overflow:hidden;
          position: relative;
      }

        .buy-content-bottom{
            padding: 0 10px;
            position: relative;
            background-color: red;
        }
        .buy-content-bottom>.box{
            padding: 10px;
            background: white;
            border-radius: 5px;
            margin-top: -40px;
            height: 200px;
            box-shadow: 0 0 1px 1px #76d9ec;
            position: absolute;
            width: 95%;
            left: 2.5%;
            top: -10px;
        }
        .standard-clothing{
            margin-top: 10px;
        }
         .standard-clothing>p span{
             border-radius: 30px;
             padding: 5px 10px;
             background: #22d673;
             color: white;
         }
        #sign-up{
            background: #22d673;
            color: white;
            bottom: 0;
            width: 100%;
            position: fixed;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <!--header start-->
    <div class="row header">
      <div><span id="back" class="glyphicon  glyphicon-chevron-left" style="float: left;cursor: pointer;"></span>森淼商城</div>
    </div>
        <!--header end-->

    <!--content start-->
    <div class="row content  " style="margin-bottom: 50px;">
        <div class="buy-content-top">
           <img src="../images/shopping-cloth-1.png" class="img-responsive center-block">
        </div>
        <div class="buy-content-bottom">
            <div class="box">
                <div  class="standard-clothing">
                    <p align="left"><span>指定工作服</span></p>
                    <span  style="color:#fdcc78;margin-left: 10px" class="glyphicon glyphicon-yen"><span style="color:#ff7474">100.0</span></span>
                </div>
            </div>
        </div>
        <div style="position: relative">
            <a class="btn" id="sign-up">立即购买</a>
        </div>

    </div>
    <!--content end-->


</div>
</body>
<script src="../js/common/jquery-2.1.4.min.js"></script>
<script src="../js/index.js"></script>
<script src="../plugin/bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>
<script src="../plugin/bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>
<!--<script src="../plugin/masonry-js/masonry.js"></script>-->
<script src="../plugin/masonry-js/masonry.pkgd.min.js"></script>
<script src="../plugin/masonry-js/imagesloaded.pkgd.min.js"></script>
<script>
    $('.masonry').imagesLoaded(function() {
                $('.masonry').masonry({
                    itemSelector: '.item'
                });
            });
</script>

</html>